import React, { useEffect, useState } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'

import { CenterPopup, PullToRefresh } from 'antd-mobile'

import { 
    getUserPerfectInfo, 
    setUserPerfectInfo,
    getHosHomeData,
    setHosHomeData
} from "@/utils/storageUtil"

import { getHosData, login, getUserTakings, getUserMemos } from "@/utils/dataUtil"

import ExitCompany from '@/components/ExitCompany'
import Infomation from "@/components/hospital/Infomation"
import DrugMsg from "@/components/hospital/DrugMsg"
import SportInfo from '@/components/hospital/SportInfo'
import Sleep from '@/components/hospital/Sleep'
import Heart from '@/components/hospital/Heart'

import drugImg from "@/assets/images/hospital/drug.png"
import memImg from "@/assets/images/hospital/mem.png"
import tipImg from "@/assets/images/hospital/tip.png"



function HospitalMain(props) {

    //导航
    const navigator = useNavigate();

    const [searchParams] = useSearchParams();

    //完善用户信息弹窗
    const [infoVisible, setInfoVisible] = useState(false);

    //首页数据
    const [hlthData, setHlthData] = useState({});

    //用药提醒
    const [takings, setTakings] = useState([]);

    //备忘录
    const [memoList, setMemoList] = useState([]);


    //点击完善信息弹出层的确定按钮，跳转页面
    const clickConfirmBtn = () => {
        setInfoVisible(false);
        navigator("/archives")
    }

    //点击完善信息弹出层的取消按钮
    const clickCancelBtn = () => {
        setInfoVisible(false);
        setUserPerfectInfo(props.employeeId);
    }

    //点击查看用药提醒
    const clickLookTotalDrug = () => {
        if(takings.length === 0) {
            navigator("/add_med", {
                state: {type: "add", page: "home"}
            });
            return;
        }
        navigator("/medication")
    }

    //点击查看备忘录
    const clickLookTotalMemo = () => {
        if(memoList.length === 0) {
            navigator("/add_mem", {
                state: {type: "add", page: "home"}
            });
            return;
        }
        navigator("/memo")
    }
    
    //获取医院的首页数据
    const getHomeData = async (rf) => {
        const miId = searchParams.get("mi_id");
        
        if(rf) {
            let response = await login({ miId: miId });
            if (response.status === 5000) {
                props.refresh();
                return;
            }
        }
        //用户和健康信息
        getHosData().then(res => {
            if(res.status !== 1) {return};
            //赋值数据
            setHlthData(res.data);
            setHosHomeData(res.data)
        });
    }


    //获取医院的首页数据
    useEffect(() => {
        const hosHomeData = getHosHomeData();
        if(hosHomeData) {
            setHlthData(hosHomeData);
        } else {
            getHomeData(false);
        }
    }, [props.employeeId])




    //判断该用户是否存储过弹出层的标记
    useEffect(() => {
        if (props.employeeId && getUserPerfectInfo(props.employeeId) === null) {
            setInfoVisible(true);
            setUserPerfectInfo(props.employeeId);
        }
    }, [props.employeeId])


    //获取用药提醒
    useEffect(() => {
        getUserTakings().then(res => {
            if(res.status === 1) {
                setTakings(res.data);
            }
        })
        getUserMemos().then(res => {
            if(res.status !== 1) {return;}
            setMemoList(res.data);
        })
    }, [])





    return (
        <>
            {/* 内容部分 */}
            <div className='hosContainer'>
                <PullToRefresh onRefresh={() => getHomeData(true)}>

                {/* 用户头部信息 */}
                <Infomation lastAbnormal={hlthData?.lastAbnormal} name={hlthData?.name}></Infomation>

                {/* 用户的用药消息 */}
                <DrugMsg illTakings={hlthData?.illTakings}></DrugMsg>


                {/* 用药提醒和备忘录item */}
                <div className='memAndDrug'>
                    <div className='memAndDrugLeft' onClick={clickLookTotalDrug}>
                        <img alt='' src={drugImg} className='memAndDrugIcon' />
                        <span>用药提醒</span>
                    </div>
                    <div className='memAndDrugLeft' onClick={clickLookTotalMemo}>
                        <img alt='' src={memImg} className='memAndDrugIcon' />
                        <span>备忘录</span>
                    </div>
                </div>

                {/* 用户的运动信息 */}
                <SportInfo steps={hlthData?.steps} kcal={hlthData?.kcal} intensity={hlthData?.intensity} validStand={hlthData?.validStand}></SportInfo>

                {/* 睡眠 */}
                <Sleep sleep={hlthData?.sleep} date={hlthData?.date}></Sleep>

                {/* 心率 */}
                <Heart heart={hlthData?.heart} spo2={hlthData?.spo2} stress={hlthData?.stress} bloods={hlthData?.bloods} date={hlthData?.date}></Heart>

                </PullToRefresh>

                {/* 退出按钮组件 */}
                <ExitCompany type="main"></ExitCompany>
            </div>


            {/* 弹出层部分 */}
            <CenterPopup visible={infoVisible} className='hosPopBox'>
                <div className='hosPop'>
                    <div className='hosPopTip'>
                        <img className='hosPopTipImg' alt='' src={tipImg} />
                    </div>

                    {/* 按钮 */}
                    <div className='hosPopFoot'>
                        <div className='hosPopFootCancel' onClick={clickCancelBtn}>取消</div>
                        <div className='hosPopFootCancel hosPopFootBtn' onClick={clickConfirmBtn}>开始</div>
                    </div>
                </div>
            </CenterPopup>
        </>
    )
}


export default React.memo(HospitalMain)